<template>
  <div class="wrapper">
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
    <Tabbar placeholder route v-show="showFooter">
      <TabbarItem icon="home-o" replace to="/">家庭活动</TabbarItem>
      <TabbarItem icon="comment-circle-o" replace to="/healthManagement">健康管理</TabbarItem>
      <TabbarItem icon="todo-list-o" replace to="/about">请假申请</TabbarItem>
      <TabbarItem icon="description" replace to="/luckdraw">荣誉墙</TabbarItem>
      <TabbarItem icon="friends-o" replace to="/todoList">本周食谱</TabbarItem>
      <TabbarItem icon="flag-o" replace to="/lastview">打卡</TabbarItem>
    </Tabbar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Tabbar, TabbarItem } from "vant";

export default defineComponent({
  name: "App",
  components: {
    Tabbar,
    TabbarItem,
  },
  computed: {
    showFooter() {
      return this.$route.path.split("/").length < 3;
    },
  }
})
</script>
<style>
</style>